<script setup>
import {getAccountDataAPI,delAccountDataAPI} from "../../api/accounting"
import accountDialog from "./components/accountDialog.vue"
import {ref,onMounted} from "vue"
const data = ref({
  page:1,
  pageSize:5
})
const total = ref(0)
const accountData = ref([])
const handleSizeChange = (e)=>{
    data.value.pageSize=e
    getAccountData()
}
const handleCurrentChange = (e) =>{
  data.value.page = e
  getAccountData()
}
const getAccountData = async()=>{
  const res = await getAccountDataAPI(data.value)
  accountData.value = res.data.rows
  total.value = res.data.total
}
onMounted(()=>{
  getAccountData()
})
const dialogRef = ref(null)
const openAdd = ()=>{
  dialogRef.value.isShow = true
}
const update = ()=>{
  getAccountData()
}
const del = async(id)=>{
  await delAccountDataAPI(id)
  getAccountData()
  }
  const edit = (id)=>{
    dialogRef.value.isShow = true
    dialogRef.value.getAccountDetail(id)
  }
</script>

<template>
  <div class="accounting">
    <div class="top">
      <el-button type="primary" @click="openAdd">增加停车计费规则</el-button>
    </div>
    <el-table :data="accountData">
      <el-table-column type="index" label="序号" width="60px"></el-table-column>
      <el-table-column label="费用规则编号" prop="ruleNumber"></el-table-column>
      <el-table-column label="计费规则名称" prop="ruleName"></el-table-column>
      <el-table-column label="免费时长(分钟)" prop="freeDuration"></el-table-column>
      <el-table-column label="收费上线(元)" prop="chargeCeiling"></el-table-column>
      <el-table-column label="计费方式" prop="chargeType">
        <template #default="{row}">
          <span>{{ row.chargeType==="duration"?'时长收费':row.chargeType==="turn"?'按次收费':'分段收费' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计费规则" prop="ruleNameView"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button link type="primary" @click="edit(row.id)">编辑</el-button>
          <el-button link type="primary" @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="data.page"
      v-model:page-size="data.pageSize"
      :page-sizes="[5, 10, 20, 30]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <accountDialog ref="dialogRef" @update="update"></accountDialog>
</template>

<style scoped>
.accounting{
  height: 100%;
  background-color: #fff;
  padding: 20px;
}
.top{
  margin-bottom: 20px;
}
</style>
